<!-- 一个numcontrol组件 -->
<template>
	<view class="num-control">
		<image class="btn" @click="changeNum('decrease')" src="/static/kind_icon/decrease.png" mode="scaleToFill" v-show="number>0"></image>
		<text class="num" v-show="number>0">{{number}}</text>
		<image class="btn" @click="changeNum('increase')" src="/static/kind_icon/increase.png" mode="scaleToFill"></image>
	</view>
</template>

<script>
	export default {
		props: {
			number: {
				type: Number,
				default: 0
			},
			min: {
				type: Number,
				default: 0
			},
			max: {
				type: Number
			},
			step: {
				type: Number,
				default: 1
			}
		},
		methods:{
			changeNum(type) {
				this.$emit('changeNum', type);
			}
		}
	}
</script>

<style lang="scss">
	.num-control {
		display: flex;
		align-items: flex-end;
		.btn {
			width: 46upx;
			height: 44upx;
			background-color: #fff;
		}
		.num {
			padding: 0 8upx;
			font-size: 28upx;
			vertical-align: text-top;
			color: #222;
			line-height: 44upx;
		}
	}
</style>
